<html>
<head>
  <title>02canvas</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/307027 (zh-CN, DDL); Windows/6.1.0 (Win32);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="711"/>
<h1>02canvas</h1>

<div>
<span><div><span style="color: rgb(28, 51, 135);"><b>     HTML 5 的 canvas 元素使用 JavaScript 在网页上绘制图像。</b></span></div><div>画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</div><div>     使用canvas编程，首先要获取其<b>上下文（context）。</b>接着在上下文中执行动作，最后将这些动作应用到上下文中。可以讲canvas的这种编辑方式想象成为数据库事务：开发人员先发起一个事物，然后执行某些操作，最后提交事物。</div><div><b><span style="font-size: 19px;">使用HTML5 Canvas API 的重要流程</span></b></div><ol><li>通过引用特定canvas ID值来获取对canvas对象的访问权</li><li>接着定义一个context变量，调用canvas对象的getContext方法，并传入希望使用的canvas类型</li><li>传入&quot;2d&quot;来获取一个二维上下文，目前唯一可用的上下文</li></ol><div><b><span style="font-size: 19px;">使用的方法</span></b></div><div>    <span style="color: rgb(173, 0, 0);"><b> canvas中所有的操作都是通过上下文对象来完成的。</b></span></div><div>     对上下文的很多操作都不会立即反映到页面上。beginPath,moveTo以及lineTo这些函数都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。<span style="color: rgb(173, 0, 0);"><b>只用当对路径应用绘制（stroke）或填充（fill）方法时，结果才会显示出来。</b></span>否则，只有在显示图像、显示文本或者绘制、填充和清除矩形框的时候，canvas才会马上更新。</div><div>创建 Canvas 元素：向 HTML 5 页面添加 canvas 元素。规定元素的 id、宽度和高度：</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;&gt;&lt;/canvas&gt;</div></div><div>通过JavaScript来绘制，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;script type=&quot;text/javascript&quot;&gt;</div><div>var c=document.getElementById(&quot;myCanvas&quot;);</div><div>var cxt=c.getContext(&quot;2d&quot;);</div><div>cxt.fillStyle=&quot;#FF0000&quot;;</div><div>cxt.fillRect(0,0,150,75);</div><div>&lt;/script&gt;</div></div><ul><li><span style="font-size: 19px;">通过规定尺寸、颜色和位置，来绘制一个圆</span></li><li><span style="font-size: 19px;">通过指定从何处开始，在何处结束，来绘制一条线</span></li></ul><div><span style="font-size: 19px;"><br/></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;script&gt;</div><div>    function drawDiagonal() {</div><div>        //取得canvas元素及其绘图上下文</div><div>        var canvas = document.getElementById('diagonal');</div><div>        var context = canvas.getContext('2d');</div><div><br/></div><div>        //用绝对坐标来创建一条路径</div><div>        context.beginPath();</div><div>        context.moveTo(70,140);</div><div>        context.lineTo(140,70);</div><div><br/></div><div>        //将这条线绘制到canvas上</div><div>        context.stroke();</div><div>        }</div><div>        window.addEventListener(&quot;load&quot;,drawDiagonal,true);</div><div>&lt;/script&gt;</div></div><div><span style="font-size: 19px;"><br/></span></div><ul><li><span style="font-size: 19px;">使用您指定的颜色来绘制渐变背景</span></li></ul><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="margin-left:40px;"><span style="font-family: 微软雅黑;"><span style="color: rgb(0, 0, 0);"><span style="font-size: medium;">cxt.fillStyle=grd;</span></span></span></div><div style="margin-left:40px;"><span style="font-family: 微软雅黑;"><span style="color: rgb(0, 0, 0);"><span style="font-size: medium;">cxt.fillRect(0,0,175,50)</span></span></span></div></div><ul><li><span style="font-size: 19px;">把一幅图像放置到画布上</span></li></ul><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>      cxt.drawImage(img,0,0)</div></div><div><br/></div><div><span style="color: rgb(28, 51, 135);"><b><span style="font-size: 21px;">变换</span></b></span></div><div>     在canvas上绘制图像的另一种方式——使用变换（transformation）。它是介于开发人员发出的指令和canvas显示结果之间的一个修正层。不管在开发中是否使用变换，修正层始终都存在。</div><ul><li>     <img src="02canvas_files/Image.png" type="image/png" data-filename="Image.png"/></li></ul><div><br/></div><div><span style="color: rgb(28, 51, 135);"><b><span style="font-size: 21px;">路径</span></b></span></div><div>     HTML5 Canvas API 中的路径代表你希望呈现的任何形状。</div><div>     本章对角线示例就是一条路径，代码中调用beginPath 就说明是要开始绘制路径了。实际上，路径可以要多复杂有多复杂：多条线、曲线段，甚至是子路径。如果想在canvas上绘制任意形状，那么你需要重点关注路径API。</div><div>     对于canvas来说，beginPath函数最大的用处是canvas需要据此来计算图形的内部和外部范围，以便完成后续的描边的填充。</div><div>     几个简单的context路径函数：</div><ul><li>moveTo（x，y）</li><li>lineTo（x，y）</li></ul><div><br style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"/></div></span>
</div></body></html> 